<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="bottom">
        <view class="items">
          <text class="til">账号:</text>
          <input class="val" :value="inputObj.username" disabled disabled="true" />
        </view>
        <view class="items">
          <text class="til">手机号:</text>
          <input class="val" v-model="inputObj.phone" disabled="true" />
        </view>
        <view class="items">
          <text class="til">手机验证码:</text>
          <input class="val" v-model="inputObj.code" placeholder="请输入" />
          <text :class="{'send-code-btn':codeMsg==='发送验证码'}" @click="codeMsg==='发送验证码' && sendCode()">{{codeMsg}}</text>
        </view>
        <view class="items">
          <text class="til">密码:</text>
          <input class="val" v-model="inputObj.newPassword" placeholder="请输入" />
        </view>
        <view class="items">
          <text class="til">确认密码:</text>
          <input class="val" v-model="inputObj.againPwd" placeholder="请输入" />
        </view>
      </view>
    </view>
    <view class="footer">
      <button type="primary" @click="handleClick">确认</button>
    </view>
    <tip-box :show="showMsgTip" :message="pwValidTip" :duration="2000" @showTip="showTip"></tip-box>
  </view>
</template>

<script>
  import { toast } from '@/utils/common';
  import { getUser, setPassword, sendSmsCode } from '@/api/login.js';
  export default {
    driverName: 'resetPwd',
    props: {},
    data() {
      return {
        showMsgTip: false,
        pwValidTip: '',
        codeSeconds: 60,
        codeMsg: '发送验证码',
        interval: null,
        inputObj: {
          username: undefined,
          phone: undefined,
          code: undefined,
          newPassword: undefined,
          againPwd: undefined,
          userId: undefined,
          openId: undefined
        }
      };
    },
    onLoad(option) {
      this.inputObj.userId = option.userId
      this.inputObj.openId = option.openId
      if (this.inputObj.userId && this.inputObj.openId) {
        this.getUser()
      }
    },
    methods: {
      showTip(event) {
        this.showMsgTip = event
      },
      async getUser(id) {
        const res = await getUser(this.inputObj.userId)
        if (res.code === 0) {
          this.inputObj.username = res.data.username
          this.inputObj.phone = res.data.mobile
        }
      },
      async sendCode() {
        const res = await sendSmsCode({
          mobile: this.inputObj.phone,
          scene: 6
        })
        if (res.code === 0 && res.data) {
          this.getCodeMsg()
          toast('验证码发送成功');
        }
      },
      getCodeMsg() {
        this.interval = setInterval(() => {
          if (this.codeSeconds <= 0) {
            clearInterval(this.interval);
            this.codeSeconds = 60;
            this.codeMsg = '发送验证码';
            return;
          }
          this.codeSeconds--;
          this.codeMsg = `剩余${this.codeSeconds}秒`;
        }, 1000);
      },
      async handleClick() {
        if (!this.inputObj.code) {
          toast('请输入手机验证码');
          return;
        }
        if (!this.inputObj.newPassword) {
          toast('请输入密码');
          return;
        }
        if (!this.inputObj.againPwd) {
          toast('请输入确认密码');
          return;
        }
        if (this.inputObj.newPassword !== this.inputObj.againPwd) {
          toast('密码和确认密码不一致');
          return;
        }
        if (!this.validatePassword(this.inputObj.newPassword)) {
          this.pwValidTip = '请输入6-16位包含数字、字母、特殊符号（除空格）两种以上的密码'
          this.showMsgTip = true
          return;
        }
        const data = JSON.parse(JSON.stringify(this.inputObj));
        delete data.phone
        delete data.againPwd
        const res = await setPassword(data)
        if (res.code === 0) {
          uni.reLaunch({
            url: '/packageA/pages/login'
          });
          toast('设置成功');
        }
      },
      validatePassword(value) {
        const regex = /^((?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[!@#$%^&*()_+\-\=])|(?=.*\d)(?=.*[!@#$%^&*()_+\-\=]))[A-Za-z\d!@#$%^&*()_+\-\=]{6,16}$/;
        return regex.test(value)
      },
    }
  };
</script>

<style lang="scss" scoped>
  .phxx-item {
    height: calc(100vh - 20px);
    box-sizing: border-box;
    margin: 15px;
    font-size: 15px;
    color: #000;

    .phxx-item-content {
      background: #fff;
      padding: 10rpx 30rpx;
      border-radius: 15px;

      .bottom {
        padding: 10rpx 0 0 0;

        >.items {
          padding-bottom: 6rpx;
          display: flex;
          align-items: center;
          padding-top: 15px;
          border-bottom: 1px solid #E6E6E6;

          .send-code-btn {
            color: #409EFE;
            text-decoration: underline;
            text-underline-offset: 2px;
          }
        }

        >view:last-child {
          border-bottom: 0 !important
        }

        /* .btn {
          button {
            width: 100%;
            height: 40px !important;
            margin-top: 45px;
            line-height: 40px !important;
          }
        } */

        .til {
          width: 30%;
          display: inline-block;
        }

        .val {
          flex: 1;
          margin-left: 30rpx;
          display: inline-block;
          border-radius: 5px;
          height: 30px;
        }
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #ffffff;
      padding: 10px 13px 35px 13px;

      button {
        width: calc(100% - 26px) !important;
        height: 45px !important;
        line-height: 40px !important;
      }
    }
  }
</style>